Landing Page Builder Guide

🖼

What This Tool Does

This is a form on the left, a live preview on the right. You describe a business in plain fields — name, colors, headlines, testimonials — and the tool sends that description to Claude, which writes a complete, single-file landing page in the theme, colors, and copy you specified. The page appears in the preview pane a few seconds later, and you download it from there.

Nothing about the page is templated behind the scenes. Claude writes the HTML and CSS fresh for every generation, so two businesses with different fonts, colors, and copy get two genuinely different pages, not the same layout with new text dropped in.

Requires An Anthropic API key. Get one at console.anthropic.com. Using the API costs money, billed by Anthropic per generation according to the model you pick — check your usage and billing there.

✦

Quick Start

Add your API key

Open the AI Settings section at the top of the form, paste your key, click Save Key.

Fill in the form

Work down the sections — business info, colors, hero copy, bio, feature cards, testimonials, social links, footer. Nothing is required, but the more you fill in, the more specific the result.

Click Generate My Landing Page

Claude writes the page live. This takes roughly 30 seconds — the character count ticks up as it streams in.

Review the preview

The finished page loads directly in the right-hand pane. Scroll through it there before downloading anything.

Download and add your images

Use ZIP + Images Folder for a ready-to-fill project folder, or HTML Only if you're managing images yourself. See Image Specs for exact sizes and filenames.

🔑

AI Settings

form · section 1

Everything the tool needs to talk to Anthropic lives in this one section, and you only have to set it up once — it's remembered in the browser.

API Key

Paste your key and click Save Key. It's stored only in this browser's local storage and sent directly from your browser to Anthropic's API when you generate — it never passes through any server of Don's. Clear Key removes it. The key status line under the field shows a masked version of whatever's currently saved, so you can confirm it's there without re-entering it.

Model

A dropdown of current Haiku, Sonnet, and Opus models. If a key is saved, Refresh Model List pulls the live, current lineup straight from Anthropic — useful since Anthropic renames and retires models over time. Without a key, or if the fetch fails, it falls back to a small built-in list so the tool still works.

Custom Model ID

An override field. If Anthropic ships a new model that hasn't shown up in the dropdown yet, paste its exact model ID here and it takes priority over whatever's selected above — no need to wait on this tool being updated.

Thinking Power

Only shows up for Sonnet and Opus models (Haiku doesn't support it). Five levels from Low to Max, controlling how much the model reasons before it writes. High is the default and works well for a landing page's worth of content — reach for Max if a generation comes back thin or generic, or drop to Low/Medium for a faster, cheaper pass while you're testing copy.

📝

Filling In Each Section

form · sections 2–10

Every section below can be collapsed by clicking its header once you're done with it — the small arrow on the right flips to show it's closed. Nothing here is required to generate a page, but empty fields become generic placeholder copy, so the more real detail you give it, the less editing you'll want to do afterward.

Your Business

Business Name, Tagline, Business Type

Sets the identity and tone Claude writes for. Business Type (photographer, designer, studio, etc.) shapes the language and framing throughout the whole page, not just this section.

Website URL, Email Address

The email becomes a clickable mailto: link where it appears; the website URL is placed as a footer link. Leave either blank and it's simply omitted.

Color & Style

Primary Color / Accent Color

Primary drives backgrounds and overlays; accent drives buttons, links, and highlights. Click the swatch to pick, or type a hex value directly.

Page Theme, Font Style

Theme (Dark & Moody / Light & Clean / Warm Neutral) sets the overall mood and contrast direction. Font Style is a description, not a fixed typeface — Claude picks Google Fonts that match the mood you name (Elegant Serif, Modern Sans, Bold Editorial, Minimal Clean).

Hero Section

The full-viewport opening section. Headline, subheadline, and one CTA button that also appears again in the sticky nav bar. This is the first thing every visitor reads — it's worth writing a few versions and picking the strongest.

About / Bio

A two-column section: your bio.jpg image on the left, your text on the right (stacks on mobile). Write this in first person if it's you, third person if it's describing a studio or team.

Feature Cards

Three services or offerings in a row. Each needs a title and a short description — a sentence or two reads better than a paragraph, since these are meant to be scanned, not read closely.

Mid-Page CTA

A second, distinct call to action partway down the page — headline, body copy, button, and a square image beside it. Give it a different angle than the hero's CTA (the hero sells the vision, this one can push toward booking or contact specifically).

Testimonials

Three quote-and-attribution blocks. Real quotes from real clients read better than anything invented — use the client's actual words where you can, trimmed for length.

Social Media

Instagram, Facebook, LinkedIn, Behance. Leave any of them blank and that platform is left out of the footer entirely — it won't show up as a broken or empty icon.

Footer

A closing headline over the footer.jpg background (a dark overlay is applied automatically so text stays readable over any photo), an optional link below it, and your copyright line at the very bottom.

🖼

Image Specs

The generated page references images by exact filename, all inside one images/ folder that sits next to index.html. Every image is set to fill its frame with object-fit: cover, so a slightly different size won't break the layout — but matching the aspect ratio below keeps your images from being cropped somewhere you didn't intend.

File	Used for	Recommended size
images/logo.png	Nav bar logo	≤ 400×120px
images/hero.jpg	Full-screen hero background	1920×1080
images/bio.jpg	About / bio section	600×750 (portrait)
images/card1.jpg	Feature card 1	800×500
images/card2.jpg	Feature card 2	800×500
images/card3.jpg	Feature card 3	800×500
images/cta.jpg	Mid-page CTA image	600×600 (square)
images/footer.jpg	Footer background	1920×600

Logo file specifically Use a PNG with a transparent background if you have one. If logo.png is missing entirely, the page falls back to showing the business name as text in the nav — nothing breaks either way.

Card images specifically card1.jpg, card2.jpg, and card3.jpg should all be the same dimensions. The three-column grid is built assuming a consistent size across all three — mismatched sizes are the most common cause of a lopsided-looking card row.

⚙

Generating & Previewing

Click Generate My Landing Page at the bottom of the form. The status bar at the top of the page reports what's happening at each stage. While it's working, a character count climbs in the preview pane — the page is streaming in live, not appearing all at once.

When it finishes, the page loads directly into the preview pane exactly as it would look live. Scroll through it, check the colors and copy, and if something's off, adjust the form and click Generate again — each click produces a fresh version, and generating again simply replaces the previous preview.

A generation you haven't downloaded yet is not saved anywhere. Closing the tab or generating again without downloading first means that version is gone.

⬇

Downloading & Deploying

Once a page is in the preview, two download buttons appear at the top of the output panel.

↓ HTML Only

A single index.html file with no images folder. Use this if you already have image hosting set up, or you're dropping the code into an existing project.

↓ ZIP + Images Folder

A ZIP containing index.html plus an images/ folder with a README listing every file the page expects. Unzip it, add your photos with the exact filenames from the table above, and the folder is ready to upload as-is.

To put the page online

Upload index.html to your web server's root folder, or any subfolder.
Upload the images/ folder to that same location, alongside it.
That's it — no build step, no dependencies to install.

✎

Making Changes Later

Two ways to change something after the fact, and which one to reach for depends on what's changing.

Swapping a photo

Just replace the file in images/ with a new one using the same filename. No code editing, no regenerating — every image is set to fill its frame, so this is always safe.

Changing copy, colors, or layout

Go back to the form, adjust the fields that need to change, and click Generate again. This produces a genuinely new page rather than patching the old one, which is usually faster and more reliable than hand-editing generated HTML.

Small manual tweaks

If you're comfortable in code, the downloaded HTML uses CSS custom properties (--primary, --accent, and similar) defined once near the top of the <style> block — changing those two values retints the whole page without touching anything else.

◆

Troubleshooting

Generate is disabled, or it tells me to add an API key

Open AI Settings, paste your key, and click Save Key. The status bar and the field itself both confirm once it's saved.

I get an error message after clicking Generate

The status bar shows the actual error text from Anthropic. Most often it means the key is invalid, expired, or out of available credit — check console.anthropic.com to confirm the key and your account's usage limits.

The Model dropdown looks short or out of date

Click Refresh Model List (a saved key is required) to pull Anthropic's current lineup. Without a key, the tool shows a small built-in fallback list so it still functions.

I want a model that isn't in the dropdown at all

Type its exact model ID into Custom Model ID. That field overrides the dropdown completely.

The feature cards look uneven or oddly cropped

Check that card1.jpg, card2.jpg, and card3.jpg are all the same dimensions — see Image Specs.

Is my API key safe?

It's saved only in this browser (local storage) and sent directly from your browser to Anthropic when you generate. It never touches a server of Don's. Clearing your browser data, or clicking Clear Key, removes it.